<script setup>
import {ref, defineModel, defineProps, defineEmits} from "vue"

// 定义model：v-model：父子组件间进行联动
//做一个双向绑定控制对话框的显示
let dialogVisible = defineModel({required: true});

// 定义属性
//控制对话框的样式
let props = defineProps({
    title: {
        type: String,
        default: ''
    },
    width: {
        type: String,
        default: '500'
    }
})
// 定义事件：子组件向父组件传递事件和数据
//宏定义了两个事件：cancel 和 submit
const emits = defineEmits(['cancel', 'submit'])


const onCancel = () => {
    dialogVisible.value = false; //关闭对话框
    emits('cancel')  //触发事件
}
const onSubmit = () => {
    emits('submit');
}

</script>

<template> 
<el-dialog v-model="dialogVisible" :title="props.title" :width="props.width">
        <slot></slot>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="onCancel">取消</el-button>
                <el-button type="primary" @click="onSubmit">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped>

</style>